@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --shiki-token-punctuation: rgba(0, 0, 0, 0.5);
  --shiki-token-comment: rgba(100, 116, 139, 0.8);
  --color-text-primary: #0073e6;
}

.dark {
  --shiki-token-string-expression: hsl(160, 75%, 45%);
  --shiki-token-punctuation: rgba(255, 255, 255, 0.5);
}

/**
 * Navbar on home
 */
.navbar-home {
  @apply bg-slate-850 text-white dark:bg-slate-850;
}

/* Hamburger menu */
.navbar-home svg.open {
  @apply !text-slate-900 dark:!text-white;
}

.navbar-home nav > a {
  @apply !text-white transition-opacity hover:opacity-70;
}

html:not(.dark) .navbar-home .nextra-scrollbar {
  @apply !bg-white;
}

.navbar-home .nextra-nav-container-blur {
  display: none;
}

/**
 * Typography
 */

.nextra-content {
  figure {
    @apply my-8 flex flex-col items-center;
  }

  code {
    white-space: pre;
  }

  figure .nextra-code-block {
    @apply w-full;
  }
  figure .nextra-code-block > pre {
    @apply mb-0;
  }

  figcaption {
    @apply mt-4 text-center text-sm text-slate-500;
  }

  summary {
    @apply font-bold !pr-8;
  }
  summary > code {
    margin: 0 0.3em;
  }

  details > div > div {
    @apply pt-4 pl-7 pr-3;
  }
  details > div > div:last-child {
    @apply mb-4;
  }

  a[target='_blank'] {
    @apply whitespace-nowrap;
  }
  a[target='_blank']::after {
    content: '';
    @apply inline-block w-3 h-3 ml-1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: currentColor;
    mask: url('/external-link.svg');
  }
}
